<!--任务详情页-->
<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!--按钮-->
    <el-row>
      <el-col>
        <div class="button-wrapper">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/affair/task/review' }" >返回上一页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button size="mini" type="primary" round @click="openChildDutyList">增加子任务</el-button>
          <el-button size="mini" type="warning" round  @click="openComplete">处理完成并上报</el-button>

        </div>
      </el-col>

    </el-row>
    <!--表格-->
      <el-form :model="tableData" >
        <!-- <el-form :model="form"> -->
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务编码"  style="width:300px">
              <el-input v-bind:readonly="readonly" v-model="tableData.dutyCode" placeholder="请选择" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称"  style="width:300px">
              <el-input  v-bind:readonly="readonly" v-model="tableData.dutyName" placeholder="请选择"  >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务类别"  style="width:300px">
              <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
              <el-input   v-bind:readonly="readonly" v-model="tableData.dutyType" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间"  style="width:300px">
              <el-input   v-bind:readonly=true v-model="tableData.completeTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="创建人"  style="width:300px">
              <el-input v-bind:readonly="readonly"  v-model="tableData.createUser" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间"  style="width:300px">
              <el-input v-bind:readonly="readonly"   v-model="tableData.createTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item  label="受理时间"  style="width:300px">
              <el-input  v-bind:readonly="readonly"  v-model="tableData.acceptTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转派时间"  style="width:300px">
              <el-input v-bind:readonly="readonly"   v-model="tableData.transferTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理状态"  style="width:300px">
              <el-input v-bind:readonly=true  v-model="tableData.handleState" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果"  style="width:300px">
              <el-input  v-bind:readonly=true v-model="tableData.handleResult" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容"  style="width:300px">
              <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >

              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


    <!-- 弹出窗口区域 -->

    <!--//子任务列表-->
    <el-dialog :visible.sync="dialogDutysVisible" width="80%">
     <!--增加按钮-->
      <div class="button-wrapper">
        <el-button size="mini" type="primary" round @click="openAdd">增加子任务</el-button>
      </div>
      <div class="data-wrapper">
        <template v-if="childList!=null">
          <el-table ref="multipleTable" :data="childList"  tooltip-effect="light" style="width: 100%">
            <!--@selection-change="handleSelectionChange"-->
            <!--<el-table-column type="selection" label="全选" width="50">-->
            <!--</el-table-column>-->
            <el-table-column type="index" label="序号" :index="indexMethod" width="50">
            </el-table-column>
            <el-table-column prop="dutyCode" label="任务编号" sortable :show-overflow-tooltip="true" width="100">
            </el-table-column>
            <el-table-column prop="dutyName"  label="任务名称" :show-overflow-tooltip="true" width="100">
            </el-table-column>
            <el-table-column prop="dutyType" label="任务类型" :show-overflow-tooltip="true" width="100">
            </el-table-column>
            <el-table-column prop="dutyNote" label="任务内容"  :show-overflow-tooltip="true" width="100">
            </el-table-column>
            <el-table-column prop="eName" label="所属事件名称" :show-overflow-tooltip="true" width="110">
            </el-table-column>
            <el-table-column prop="eCode" label="所属事件编码" :show-overflow-tooltip="true" width="110">
            </el-table-column>
            <el-table-column prop="createUser" label="任务发布人" :show-overflow-tooltip="true" width="110">
            </el-table-column>
            <el-table-column prop="createTime" label="任务发布时间" :show-overflow-tooltip="true" sortable width="130">
            </el-table-column>
            <el-table-column prop="liableUser" label="任务负责人" :show-overflow-tooltip="true" width="120">
            </el-table-column>
            <el-table-column prop="handleState" label="任务状态" :show-overflow-tooltip="true" :formatter="formatState">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button title="删除" size="small" icon="el-icon-search" type="primary" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="openEdit(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>

        <!--底部区域-->
        <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">

          <!-- 分页 -->
          <el-col :span="20">
            <div class="page-item">
              <el-pagination background
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page.sync="listQuery.currentPage"
                             :page-sizes="pageSizes"
                             :page-size="listQuery.pageSize"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="dataCount"/>
            </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium" @click="dialogDutysVisible = false">取 消</el-button>
          <el-button v-if="!readonly" size="medium" type="primary" @click="submitForm">确 定</el-button>
        </div>
        </template>
      </div>

    </el-dialog>
  <!--//编辑子任务-->
    <el-dialog title=" " :visible.sync="dialogEditVisible" v-if="form!=null">
      <el-form :model="form" >
        <!-- <el-form :model="form"> -->
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务编码" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly" v-model="form.dutyCode" placeholder="请选择">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" :label-width="formLabelWidth">
              <el-input  v-bind:readonly="readonly" v-model="form.dutyName" placeholder="请选择">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务类别" :label-width="formLabelWidth">
              <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
              <el-input   v-bind:readonly="readonly" v-model="form.dutyType" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" :label-width="formLabelWidth">
              <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="创建人" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"  v-model="form.createUser" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"   v-model="form.createTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item  label="受理时间" :label-width="formLabelWidth">
              <el-input  v-bind:readonly="readonly"  v-model="form.acceptTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转派时间" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"   v-model="form.transferTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理状态" :label-width="formLabelWidth">
              <el-input v-bind:readonly=true  v-model="form.handleState" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果" :label-width="formLabelWidth">
              <el-input  v-bind:readonly=true v-model="form.handleResult" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="责任人" :label-width="formLabelWidth" >
              <el-input  v-bind:readonly=true v-model="form.liableUser" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" :label-width="formLabelWidth" >
              <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容" :label-width="formLabelWidth">
              <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!readonly" size="medium" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--//新增子任务-->
    <el-dialog title=" " :visible.sync="dialogAddVisible" v-if="form!=null">
      <el-form :model="form" >
        <!-- <el-form :model="form"> -->
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务编码" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly" v-model="form.dutyCode" placeholder="请选择">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" :label-width="formLabelWidth">
              <el-input  v-bind:readonly="readonly" v-model="form.dutyName" placeholder="请选择">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="任务类别" :label-width="formLabelWidth">
              <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
              <el-input   v-bind:readonly="readonly" v-model="form.dutyType" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" :label-width="formLabelWidth">
              <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="创建人" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"  v-model="form.createUser" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"   v-model="form.createTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item  label="受理时间" :label-width="formLabelWidth">
              <el-input  v-bind:readonly="readonly"  v-model="form.acceptTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转派时间" :label-width="formLabelWidth">
              <el-input v-bind:readonly="readonly"   v-model="form.transferTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理状态" :label-width="formLabelWidth">
              <el-input v-bind:readonly=true  v-model="form.handleState" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果" :label-width="formLabelWidth">
              <el-input  v-bind:readonly=true v-model="form.handleResult" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="责任人" :label-width="formLabelWidth" >
              <el-input  v-bind:readonly=true v-model="form.liableUser" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" :label-width="formLabelWidth" >
              <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容" :label-width="formLabelWidth">
              <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >

              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!readonly" size="medium" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
<!--//上报任务-->
    <el-dialog title=" " :visible.sync="dialogCompleteVisible" v-if="form!=null">
      <el-form :model="form" >
        <!-- <el-form :model="form"> -->

        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容" :label-width="formLabelWidth">
              <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >

              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!readonly" size="medium" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
    export default {
        data() {
            return {

                // //子任务列表弹层显示开关
                // dialogDutysVisible:false,
                // //编辑子任务弹层显示开关
                // dialogEditVisible:false,
                // //新增子任务弹层显示开关
                // dialogAddVisible:false,
                // //完成任务上报弹层开关
                // dialogCompleteVisible:false,
                //时间下拉字典
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //下拉类型options
                dutyTypeOptions: [],
                dutyStateOptions: [{
                    dictValue: -1,
                    dictName: '待受理'
                }, {
                    dictValue: 8,
                    dictName: '待确认拒绝'
                }, {
                    dictValue: 9,
                    dictName: '处理中'
                }, {
                    dictValue: 5,
                    dictName: '处理完成'
                },
                    {
                        dictValue: 6,
                        dictName: '已驳回'
                    }, {
                        dictValue: 0,
                        dictName: '任务完成'
                    }],
                //弹层表单数据
                form:{},
                //表格全局参数
                tableData: {},
                //子任务列表
                childList:{},
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //批量选中参数
                //多选的值
                listSelect: [],
                //分页参数
                //搜索框参数
                searchInput: "",
                //搜索参数
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10
                },
                //弹框的数据是否可编辑
                readonly: true,
                value: "", //
                //页面加载
                loading: false,

                //弹层宽度
                formLabelWidth: "100px",

                // 下拉选项
                options: [
                    {
                        value: "Leanne Graham",
                        label: "Leanne Graham"
                    }
                ],
                //类型下拉选项字典
                typeDir: [
                    {
                        value: "类1",
                        key: "1"
                    },
                    {
                        value: "类2",
                        key: "2"
                    }
                ]
            };
        },
        mounted() {
            // 初始化页面
            this.postList();
            //获取任务类型下拉
            //this.getTypeOptions();
        },

        updated() {},
        destroyed() {},
        methods: {
            //打开新增，子任务列表
            openChildDutyList(){
                this.readonly = false;

                    this.loading = true;
                    var listQuery={
                        currentPage: 1,
                        pageSize: 500,
                        parentId: this.tableData.dutyId
                    };
                    this.postRequest("/api/rcs/dutys",listQuery)
                        .then(res => {
                        var data = res.data;
                    if (data.status == 200) {
                        this.childList = data.data;
                        console.log('获得的row'+ this.childList);
                        //this.dataCount = data.count;
                        this.dialogDutysVisible = true;
                    } else {
                        alert(data.msg);
                    }
                    this.loading = false;
                })
                .catch(error => {
                        //错误信息
                        console.log(error);
                });


            },
          //打开编辑子任务弹窗
            openEdit(){
                this.readonly = false;
                this.form = {};
                this.dialogEditVisible = true;
            },
            //打开新增子任务弹层
            openAdd(){
                this.readonly = false;
                this.form = {};
                this.dialogAddVisible = true;
            },
            openComplete(){
                this.readonly = false;
                this.form = {};
                this.dialogCompleteVisible = true;

            },


            // 状态翻译
            formatState: function(row, column) {
                if(row.handleState==-1){
                    return '待受理';
                }else if(row.handleState==8){
                    return '等待拒绝确认'
                }else if(row.handleState==9){
                    return  '处理中'
                }else if(row.handleState==5){
                    return  '任务结果待审核'
                }else if(row.handleState==0){
                    return  '任务已完成/关闭'
                }else{
                    return  '其他'
                }
            },
//获取任务类型下拉
            getTypeOptions(){
                //获取任务类型
                this.getDictionary({types:["DUTY_TYPE"]}).then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.dutyTypeOptions = data.data["DUTY_TYPE"];
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            },

            //列表查询
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/getDetail")
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                    console.log('获得的row'+ this.tableData.dutyNote);
                    //this.dataCount = data.count;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },
            //搜索功能
            handSearch() {
                console.log(this.listQuery)
                this.postList();
            },

            //通过
            handlePass(index, row){
                this.form = row;//给表单赋值当前行数据
                //将任务状态改为已完成
                this.form.handleState=0
                this.form.handleResult=this.form.handleResult+'    系统：任务已完成';
                    this.postRequest("/api/rcs/completeDuty", this.form)
                        .then(res => {
                        this.loading = true;
                    var data = res.data;
                    if (data.status == 200) {
                        this.$message.success(data.msg);
                        this.dialogFormVisible = false;
                        this.postList();
                        this.form = {};
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                })
                .catch(error => {
                        //错误信息
                        this.$message.error(error);
                });
            },
            //不通过弹窗
            openNoPass(index, row) {
                this.readonly = false;
                this.form = row;//给表单赋值当前行数据
                this.dialogFormVisible = true;
            },
            //处理不通过
            noPass(){
                    this.form.handleResult=this.form.handleResult+'    系统：审核不通过';//同意拒绝申请
                //将任务状态改为处置中
                this.form.handleState=9;
                    this.postRequest("/api/rcs/editDuty", this.form)
                        .then(res => {
                        this.loading = true;
                    var data = res.data;
                    if (data.status == 200) {
                        this.$message.success(data.msg);
                        this.dialogFormVisible = false;
                        this.postList();
                        this.form = {};
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                })
                .catch(error => {
                        //错误信息
                        this.$message.error(error);
                });

            },
            //多选,点击选框时
            handleSelectionChange(val) {
                var self = this;
                self.listSelect = val; //多选的参数
            },
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },

            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    };
</script>



